<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>重置密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="ruleForm" :status-icon="true" :rules="rules" ref="ruleFormRef" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="原密码" prop="oldPassword">
                        <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="rePassword">
                        <el-input type="password" v-model="ruleForm.rePassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

<script setup>
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import { useTokenStore } from '@/stores/token';

    const tokenStore = useTokenStore();
    // 获取存储在本地的 token
    const token = tokenStore.token;

    // 表单数据模型
    const ruleForm = ref({
        oldPassword: '',
        newPassword: '',
        rePassword: ''
    });

    // 表单引用
    const ruleFormRef = ref(null);

    // 表单验证规则
    const rules = ref({
        oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        rePassword: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            {
                validator: (rule, value, callback) => {
                    if (value !== ruleForm.value.newPassword) {
                        callback(new Error('两次输入的密码不一致'));
                    } else {
                        callback();
                    }
                },
                trigger: 'blur'
            }
        ]
    });

    // 提交表单
    import { userPasswordUpdateService } from '@/api/user.js';
    const submitForm = async () => {
        ruleFormRef.value.validate(async (valid) => {
            if (valid) {
                try {
                    // 发送请求到后端
                    const response = await userPasswordUpdateService(ruleForm.value, token);
                    // 处理成功响应
                    if (response.code === 0) {
                        ElMessage.success('密码重置成功');
                        resetForm();
                    } else {
                        ElMessage.error(response.message);
                    }
                } catch (error) {
                    // 处理请求错误
                    ElMessage.error('请求出错，请稍后重试');
                    console.error('Error:', error);
                }
            } else {
                ElMessage.error('表单验证失败，请检查输入');
            }
        });
    };

    // 重置表单
    const resetForm = () => {
        ruleFormRef.value.resetFields();
        ruleForm.value.oldPassword = '';
        ruleForm.value.newPassword = '';
        ruleForm.value.rePassword = '';
    };
</script>

<style scoped>
    .page-container {
        margin: 20px;
    }

    .header {
        font-size: 18px;
        font-weight: bold;
    }
</style>